import { useEffect, FC, ReactNode } from 'react';
import { View, Text, Image } from '@tarojs/components'
import './index.less';
import { AtAvatar } from 'taro-ui'
import MyAtAvatar from '@resource/tabImg/ownOn.png'

import Jifenzhongxin from '@resource/tabImg/jifenzhongxin.svg'
import Kefu from '@resource/tabImg/kefu.svg'
import Gongzhanghao from '@resource/tabImg/gongzhonghao.svg'
import Shouchang from '@resource/tabImg/shouchang.svg'
import ToRight from '@resource/tabImg/toRight.svg'


type actionListProps = {
  imgUrl: string,
  text: string
}

const defaultStyleOne = { borderBottom: 'none', marginBottom: 0 }

const actionListArr: Array<actionListProps> = [
  { imgUrl: Gongzhanghao, text: '葫芦娃账号管理' },
  { imgUrl: Gongzhanghao, text: '我求购的' },
  { imgUrl: Gongzhanghao, text: '我发布的' },
  { imgUrl: Gongzhanghao, text: '我撮合的' },
  { imgUrl: Gongzhanghao, text: '帮助中心？' },
  { imgUrl: Gongzhanghao, text: '关于我们' },
]

// 定义 Props 接口
interface Props {
  children: ReactNode;
}

const Index: FC<Props> = () => {
  useEffect(() => {
    // 任何你需要在组件挂载时执行的副作用
  }, []);

  return (
    <View className='mine'>
      <View className="header">
        <View className='personalInfo'>
          <View className='left'>
            <AtAvatar
              className='myAtAvatar'
              size='large'
              circle={true}
              image={MyAtAvatar}></AtAvatar>
          </View>
          <View className='right'>
            <View className='top'>
              小海鸥一号0001
            </View>
            <View className='bottom'>
              <Text className='tip account'>账户设置</Text>
              <Text className='tip member'>小海鸥会员</Text>
              <Text className='tip'>至尊VIP4</Text>
            </View>
          </View>
        </View>
        <View className='mainAction'>
          <View className='singal'>
            <Image src={Shouchang} mode='aspectFill' />
            <Text>收藏</Text>
          </View>
          <View className='singal'>
            <Image src={Gongzhanghao} mode='aspectFill' />
            <Text>关注公众号</Text>
          </View> <View className='singal'>
            <Image src={Kefu} mode='aspectFill' />
            <Text>客服</Text>
          </View> <View className='singal'>
            <Image src={Jifenzhongxin} mode='aspectFill' />
            <Text>积分中心</Text>
          </View>
        </View>
      </View>
      <View className="content">
        <View className='myMember'>
          <View className='singal'>
            <Image src={Shouchang} mode='aspectFill' />
            <Text>源头信息</Text>
          </View>
          <View className='singal'>
            <Image src={Shouchang} mode='aspectFill' />
            <Text>中签随心查</Text>
          </View>
          <View className='singal'>
            <Image src={Shouchang} mode='aspectFill' />
            <Text>精准找货</Text>
          </View>
          <View className='singal'>
            <Image src={Shouchang} mode='aspectFill' />
            <Text>更快出货</Text>
          </View>
          <View className='singal'>
            <Image src={Shouchang} mode='aspectFill' />
            <Text>找/出货消息推送</Text>
          </View>
          <View className='singal'>
            <Image src={Shouchang} mode='aspectFill' />
            <Text>半价抽酒</Text>
          </View>
          <View className='singal'>
            <Image src={Shouchang} mode='aspectFill' />
            <Text>至尊标识</Text>
          </View>
          <View className='singal'>
            <Image src={Shouchang} mode='aspectFill' />
            <Text>更多权益...</Text>
          </View>
        </View>
        <View className='openMember'>
          <Text className='text'>开通会员享更多惊喜特权</Text>
          <Text className='openBtn'>立即开通</Text>
        </View>
        <View className='actionList'>
          {
            actionListArr.map((item, index) => {
              const { imgUrl, text } = item
              return <View className='singal' key={index} style={index == actionListArr.length - 1 ? defaultStyleOne : {}}>
                <View className='left'>
                  <Image src={imgUrl} mode='aspectFill' className='img1' />
                  <Text className='text'>{text}</Text>
                </View>
                <Image src={ToRight} mode='aspectFill' className='right' />
              </View>
            })
          }
        </View>
      </View>
    </View >
  );
};

export default Index;
